<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="../css/bootstrap.css">
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript" src="../js/bootstrap.js"></script>
  <link rel="stylesheet" href="../css/lzjanniu.css">
</head>
<body>
<div class="container">
  <br /><br />
  <div class="col-xs-12">
    <div class="col-xs-3">
      <div class="input-group" >
					<span class="input-group-addon">
						物料名称：
					</span>
        <input type="text" class="form-control" id="cxwlmc">
      </div>
    </div>
    <div class="col-xs-3">
      <div class="input-group" >
					<span class="input-group-addon">
						物料产地：
					</span>
        <input type="text" class="form-control" id="cxwlcd">
      </div>

    </div>
    <div class="col-xs-6">
      <div class="input-group">
        <button class="button2 " id="chaxunwl">
          搜索
        </button>
        <button class="button2 btn-lg" data-toggle="modal" data-target="#tjmyModal">
          添加物料信息
        </button>
        <button  class="button2" type="button" data-toggle="modal" data-target="#shanchu1" id="piliangshanchu">批量删除</button>


      </div>
    </div>
    <br /><br /><br /><br />
    <table class="table table-hover table-bordered" id="wltable" >
      <tr>
        <td>
          选择
        </td>
        <td>物料序号</td>
        <td>物料名称</td>
        <td>物料产地</td>
        <td>库存数量</td>
        <td>物料价格</td>
        <td>操作</td>
      </tr>
    </table>
    <!-- 添加模态 -->
    <div class="modal fade" id="tjmyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" style="width: 400px">
        <div class="modal-content" style="width: 400px">
          <div class="modal-header"style="width: 400px">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×
            </button>
            <h4 class="modal-title" id="myModalLabel">
              物料信息添加
            </h4>
          </div>
          <div class="modal-body">
            <table class="table table-hover table-bordered" style="width: 400px;">

            <tr>
              <td>物料名称</td>
              <td>
                <input type="text" class="form-control" id="wlmc" placeholder=""style="width: 150px; height: 20px">
              </td>
            </tr>
            <tr>
              <td>物料产地</td>
              <td>
                <input type="text" class="form-control" id="wlcd" placeholder=""style="width: 150px; height: 20px">
              </td>
            </tr>
            <tr>
              <td>物料库存</td>
              <td>
                <input type="text" class="form-control" id="wlkc" placeholder=""style="width: 150px; height: 20px"
                       placeholder="只可输入数字"
                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                >
              </td>
            </tr>
            <tr>
              <td>物料价格</td>
              <td>
                <input type="text" class="form-control" id="wljg" placeholder=""style="width: 150px; height: 20px"
                       placeholder="只可输入数字"
                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                >
              </td>
            </tr>


            </table>

          </div>

          <div class="modal-footer">

            <button type="button" class="button2 btn-default"
                    data-dismiss="modal">关闭
            </button>
            <button type="button" class=" button2 btn-primary" id="tianjia">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改模态
    根据id进行修改


    -->
    <div class="modal fade" id="xgmyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" style="width: 400px">
        <div class="modal-content" style="width: 400px">
          <div class="modal-header"style="width: 400px">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×
            </button>
            <h4>
              物料信息修改
            </h4>
          </div>
          <div class="modal-body">
            <table class="table table-hover table-bordered" style="width: 400px ;">

            <tr>
              <td>物料名称</td>
              <td>
                <input type="text" class="form-control" id="xgwlmc" placeholder=""style="width: 150px; height: 20px">
              </td>
            </tr>
            <tr>
              <td>物料产地</td>
              <td>
                <input type="text" class="form-control" id="xgwlcd" placeholder=""style="width: 150px; height: 20px">
              </td>
            </tr>
            <tr>
              <td>物料库存</td>
              <td>
                <input type="text" class="form-control" id="xgwlkc" placeholder=""style="width: 150px; height: 20px"
                       placeholder="只可输入数字"
                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                >

              </td>
            </tr>
            <tr>
              <td>物料价格</td>
              <td>
                <input type="text" class="form-control" id="xgwljg" placeholder=""style="width: 150px; height: 20px"
                       placeholder="只可输入数字"
                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                >
              </td>
            </tr>


            </table>

          </div>

          <div class="modal-footer">

            <button type="button" class="button2 btn-default"
                    data-dismiss="modal">关闭
            </button>
            <button type="button" class=" button2 btn-primary" id="xiugaiwuliao">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除信息
    根据id进行批量或单个删除物料信息 -->
    <div class="modal fade" id="shanchu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true" >
      <div class="modal-dialog" style="width: 800px">
        <div class="modal-content"style="width: 800px">
          <div class="modal-header"style="width: 800px">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×
            </button>

          </div>
          <div class="modal-body" style="width: 800px">

            <h4>确认删除物料信息吗？</h4>

          </div>

          <div class="modal-footer" style="width: 800px">
            <button type="button" class="button2 btn-default"
                    data-dismiss="modal" id="deleteCl">确认
            </button>
            <button type="button" class="button2 btn-default"
                    data-dismiss="modal">关闭
            </button>

          </div>
        </div>
      </div>
    </div>



<!--    批量删除模态框-->
    <div class="modal fade" id="shanchu1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true" >
      <div class="modal-dialog" style="width: 800px">
        <div class="modal-content"style="width: 800px">
          <div class="modal-header"style="width: 800px">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×
            </button>

          </div>
          <div class="modal-body" style="width: 800px">

            <h4>确认删除物料信息吗？</h4>

          </div>

          <div class="modal-footer" style="width: 800px">
            <button type="button" class="button2 btn-default"
                    data-dismiss="modal" id="deleteCl1">确认
            </button>
            <button type="button" class="button2 btn-default"
                    data-dismiss="modal">关闭
            </button>

          </div>
        </div>
      </div>
    </div>


  </div>
  </div>
<script type="text/javascript">


  /**
   * 综合查询
   */
  $("#chaxunwl").on("click", function () {
    let cxwlmc = $("#cxwlmc").val();
    let cxwlcd = $("#cxwlcd").val();
    /**
     * 传值给后台
     */
    $.ajax({
      url: "wldzhcx",
      type: "post",
      dataType: "json",
      data: {cxwlmc: cxwlmc, cxwlcd: cxwlcd},
      success: function (data) {
        console.log(data);
        //清楚table旧数据赋值新数据
        $("#wltable tr").not(":first").remove();
        console.log(data);
        for (let i = 0; i < data.length; i++) {
          let wl = data[i];
          let mid = wl.mid;
          let mname = wl.mname;
          let origin = wl.origin;
          let stock = wl.stock;
          let mprice = wl.mprice;


          //
          let newTr = document.createElement("tr");
          //创建td
          let checkbox = document.createElement('td');//创建列
          let btnCheckbox = document.createElement('input');
          btnCheckbox.setAttribute('name', 'ckb');
          btnCheckbox.setAttribute('type', 'checkbox');
          btnCheckbox.setAttribute('value', 'false');
          checkbox.appendChild(btnCheckbox);

          let t1 = document.createElement("td");
          // 往td存数据
          $(t1).html(mid);
          let t2 = document.createElement("td");
          $(t2).html(mname);
          let t3 = document.createElement("td");
          $(t3).html(origin);
          let t4 = document.createElement("td");
          $(t4).html(stock);

          let t5 = document.createElement("td");
          $(t5).html(mprice);


          let czTd = document.createElement("td");
          czTd.innerHTML = "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#shanchu\" onclick=\"shanchuanniu('" + stock + "','" + mid + "')\"/>删除</button>"+
                  "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#xgmyModal\" onclick=\"xiugai(" + mid + ")\"/>修改</button>";
          $(newTr).append(checkbox);
          $(newTr).append(t1);
          $(newTr).append(t2);
          $(newTr).append(t3);
          $(newTr).append(t4);
          $(newTr).append(t5);

          $(newTr).append(czTd);
          //把数据塞入table中
          $("#wltable").append(newTr);

        }

      }
    })
  })




  $.ajax({
    url: "getwlxx",
    type: "get",
    dataType: "json",
    success: function (data) {
      console.log(data);
      console.log("执行了");

      for (let i = 0; i < data.length; i++) {
        let wl = data[i];
        let mid = wl.mid;
        let mname =wl.mname;
        let origin=wl.origin;
        let stock=wl.stock;
        let mprice=wl.mprice;


        //创建tr
        let newTr = document.createElement("tr");
        //创建td
        let checkbox = document.createElement('td');//创建列
        let btnCheckbox = document.createElement('input');
        btnCheckbox.setAttribute('name','ckb');
        btnCheckbox.setAttribute('type','checkbox');
        btnCheckbox.setAttribute('value','false');
        checkbox.appendChild(btnCheckbox);

        let t1= document.createElement("td");
        // 往td存数据
        $(t1).html(mid);
        let t2 = document.createElement("td");
        $(t2).html(mname);
        let t3 = document.createElement("td");
        $(t3).html(origin);
        let t4 = document.createElement("td");
        $(t4).html(stock);

        let t5 = document.createElement("td");
        $(t5).html(mprice);


        let czTd = document.createElement("td");
        czTd.innerHTML = "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#shanchu\" onclick=\"shanchuanniu('" + stock + "','" + mid + "')\"/>删除</button>"+
                "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#xgmyModal\" onclick=\"xiugai("+mid+")\"/>修改</button>";
        $(newTr).append(checkbox);
        $(newTr).append(t1);
        $(newTr).append(t2);
        $(newTr).append(t3);
        $(newTr).append(t4);
        $(newTr).append(t5);

        $(newTr).append(czTd);
        //把数据塞入table中
        $("#wltable").append(newTr);

      }

    }
  })
  /**
   * 修改数据
   */


  /**
   * 添加
   */
  $("#tianjia").on("click", function () {
    let wlmc = $("#wlmc").val();
    let wlcd = $("#wlcd").val();

    let wlkc = $("#wlkc").val();
    let wljg = $("#wljg").val();

    alert("添加名称为" + wlmc + "物料");
    if (wlmc.length > 0) {

    } else {
      alert("物料名称不能为空");
      return;
    }

    if (wlcd.length > 0) {

    } else {
      alert("物料产地不能为空");
      return;
    }

    if (wlkc.length > 0) {

    } else {
      alert("物料库存不能为空");
      return;
    }
    if (wljg.length > 0) {

    } else {
      alert("物料价格不能为空");
      return;
    }

    $.ajax({
      url: "tianjiawl",
      type: "post",
      dataType: "json",
      data: {"wlmc": wlmc, "wlcd": wlcd, "wlkc": wlkc, "wljg": wljg},
      success: function (data) {
        //alert(data);
        if (data.ok) {

          //在前端进行删除
          //
          alert("添加成功");
          window.location.reload();

        } else {
          //
          alert("添加失败请重新尝试");
        }
      }
    });



  })

  /**
   * 删除数据
   */

  function shanchuanniu(stock,mid) {
    $("#deleteCl").click(function () {
      // alert(stock);
      if (stock == 0) {
        //判断拥有库存吗？


        $.ajax({
          url: "deletewl",
          type: "post",
          data: {"mid": mid},
          dataType: "json",//设置响应参数类型
          success: function (data) {


            if (data.ok) {
              //在前端进行删除
              //
              alert("删除成功");
              window.location.reload();
            } else {
              //
              alert("删除失败,物料拥有库存无法删除");
              return;
            }
          }
        });
      } else {
        alert("删除失败,物料拥有库存无法删除");
        return;
      }


    })
  }

    /**
     * 添加物料信息
     */





</script>
<script>
  /**
   * 修改信息
   */

  function xiugai(mid) {
    $.ajax({
      url: "xiugaiwuliuchaxun",
      type: "post",
      data: {
        "mid": mid
      },
      dataType: "json",//设置响应参数类型
      success: function (data) {
        for (let i = 0; i < data.length; i++) {
          let wl = data[i];
          let mid = wl.mid;
          let mname =wl.mname;
          let origin=wl.origin;
          let stock=wl.stock;
          let mprice=wl.mprice;
          $("#xgwlmc").val(mname);
          $("#xgwlcd").val(origin);
          $("#xgwlkc").val(stock);
          $("#xgwljg").val(mprice);

        }
      }
    })

    $("#xiugaiwuliao").click(function () {
      let xgwlmc = $("#xgwlmc").val();
      let xgwlcd = $("#xgwlcd").val();
      let xgwlkc = $("#xgwlkc").val();
      let xgwljg = $("#xgwljg").val();
      alert("修改物料序号为" + mid + "的信息");

      if (xgwlmc.length > 0) {

      } else {
        alert("名称不能为空");
        return;
      }
      if (xgwlcd.length > 0) {

      } else {
        alert("产地不能为空");
        return;
      }
      if (xgwlkc.length > 0) {

      } else {
        alert("库存不能为空");
        return;
      }
      if (xgwljg.length > 0) {

      } else {
        alert("价格不能为空");
        return;
      }


      $.ajax({
        url: "xiugaiwuliuxinxi",
        type: "post",
        data: {
          "mid": mid,
          "xgwlmc": xgwlmc,
          "xgwlcd": xgwlcd,
          "xgwlkc": xgwlkc,
          "xgwljg": xgwljg

        },
        dataType: "json",//设置响应参数类型
        success: function (data) {
          // alert(pid);

          if (data.ok) {
            //在前端进行删除
            //
            alert("修改成功");
            window.location.reload();
          } else {
            //
            alert("修改失败");
          }
        }
      });

    })
  }

</script>
<script>
  /**
   * 批量删除信息
   */
  $("#deleteCl1").click(function () {
    var checkLength = $("input:checkbox[name='ckb']:checked").length;
    if (checkLength == 0) {
      alert("请至少选择一条信息！");
      return;
    }
    $("input[type='checkbox']").each(function () { //遍历checkbox的选择状态
      if ($(this).prop("checked")) { //如果值为checked表明选中了
        // alert("确认删除车位为"+$(this).closest('tr').find('td').eq(1).text()+"的信息吗"); //获取eq为1的那一列数据
        let fxk = ($(this).closest('tr').find('td').eq(1).text());


        alert("确认删除物料序号为" + fxk + "的信息吗");
        $.ajax({
          url: "deleteinbatcheswl",
          type: "post",
          data: {"fxk": fxk},
          dataType: "json",//设置响应参数类型
          success: function (data) {
            //alert(data);
            if (data.ok) {
              //在前端进行删除
              //
              alert("删除成功");
              window.location.reload();
            } else {
              //
              alert("删除" + fxk + "的信息失败");
            }
          }
        });


      }
    });
  });
</script>
</body>
</html>